{% extends "layout/base.html.twig" %}

{% block content %}
    <section id="sign-in" class="d-flex align-items-center justify-content-center h-100">
        <form method="POST" hx-post="{{ uri('auth.sign-in.post') }}" hx-swap="outerHTML" hx-target="#sign-in" hx-select="#sign-in">
            {{ csrf()|raw }}
            {% include "components/flash.html.twig" %}
            <div class="form-floating mb-3">
                <input type="input" class="form-control {% if validation_errors.email is defined %}is-invalid{% endif %}" id="email" name="email" placeholder="" autocomplete="email">
                <label for="email">Email address</label>
                 {% include 'components/validation.html.twig' with {'validate': 'email'} %}
            </div>
            <div class="form-floating mb-3">
                <input type="password" class="form-control {% if validation_errors.password is defined %}is-invalid{% endif %}" id="password" name="password" placeholder="" autocomplete="current-password">
                <label for="password">Password</label>
                 {% include 'components/validation.html.twig' with {'validate': 'password'} %}
            </div>
            <div class="d-grid gap-2 mb-3">
                <button type="submit" class="btn btn-primary">Log in</button>
            </div>
            <div class="d-flex justify-content-center">
                <p><a hx-boost="true" href="/register" hx-swap="outerHTML" hx-select="#register" hx-target="#sign-in">Create new account</a></p>
            </div>
        </form>
    </section>
{% endblock %}
